<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="功能反馈" />
		<view class="container">
			<view class="form">
				<textarea v-model="content" class="uni-text flex1 font24" name="content" placeholder="请输入"
					placeholder-class="color-C7C8D4"></textarea>
				<view class="content">
					<view class="pic-list fboxWrap">
						<view class="pic-item" v-for="(item, index) in fileList" :key="index">
							<text class="del bksCIcon bks-c-ziyuan183shanchu color-fff font36"
								@click="delAvatar(index)"></text>
							<image class="pic" :src="item" mode="aspectFill"></image>
						</view>
						<view class="upload fboxRow Xcenter Ycenter" @click="btnUploadFile">
							<text class="bksCIcon bks-c-ziyuan119tianjia color-C8C8CC font40" />
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="fboxRow Ycenter">
						<view class="flex1">
								<view class="tag font24 color-9899A1" v-if="type == 2" @tap="onPickerShow">
								#{{ tagId ? tagName : '点击选择举报类型'}}#</view>
						</view>
						<view class="right fboxRow Xend">
							<button class="btn fboxRow Ycenter Xcenter bg-00B356-79DBA8 color-fff font28"
								 @click="formSubmit">提交</button>
						</view>
					</view>
				</view>
			</view>
			<u-picker :show="pickerShow" :columns="tagList" keyName="name" title="类型" @close="onCancel"
				@cancel="onCancel" @confirm="onConfirm"></u-picker>

		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		uploadAvatar,
		feedbackAdd,
		reportAdd
	} from '@/api/bks.mine'
	import { debounce } from '@/static/js/common.js';
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				type: 1, // 反馈 1 举报 2
				pickerShow: false,
				content: '',
				tagId: '',
				tagName: '',
				tagList: [
					[
						// 1-广告,2-色情,3-反动言论,4-攻击性言论,5-其它 
						{
							id: 1,
							name: '广告'
						},
						{
							id: 2,
							name: '色情'
						},
						{
							id: 3,
							name: '反动言论'
						},
						{
							id: 4,
							name: '攻击性言论'
						},
						{
							id: 5,
							name: '其它'
						}
					]
				],
				tagShow: false,
				fileList: [],
				options: {}
			}
		},
		onLoad: function(options) {
			if(options.type){
				this.type = options.type
			}
			this.options = options
		},
		methods: {
			onPickerShow() {
				this.tagList[0].filter((item, index) => {
					if (item.id == this.tagId) {
						this.tagIndex = index
					}
				})
				this.pickerShow = true
			},
			onCancel() {
				this.pickerShow = false
			},
			onConfirm(e) {
				console.log(e)
				this.tagIndex = e.indexs[0]
				this.tagId = e.value[0].id
				this.tagName = e.value[0].name
				this.pickerShow = false
			},
			formSubmit: debounce(function(e){
				const { type, fileList, options, tagId } = this
				let params = {}
				let fn = type == 1 ? feedbackAdd : reportAdd
				if (type == 1) {
					// 反馈
					params = {
						content: this.content,
						contentEnclosure: this.fileList
					}
				} else {
					if (!tagId) {
						wx.showToast({
							title: '请选择举报类型',
							icon: 'none',
							duration: 2000,
						})
						return
					}
					// 举报
					params = {
						// "content": '',
						// "isAudio": '',
						"content": options.contentType == 1 ? getApp().globalData.reportTemp.consultInfo : getApp().globalData.reportTemp.replyContent,
						"isAudio": options.contentType == 1 ? false : getApp().globalData.reportTemp.isAudio,
						"contentId": options.contentId,
						"contentType": options.contentType,
						"reportContent": this.content,
						"reportType": tagId,
						"toMemberId": options.memberId,
						"urlList": this.fileList
					}
				}
				fn(params).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 2000,
						success() {
							uni.navigateBack()
						}
					})
				})
			},1000),
			btnUploadFile() {
				// #ifdef H5
				const {
					bw_link
				} = getApp().getBWData(['bw_link'])
				if (bw_link.isApp) {
					let u = navigator.userAgent;
					if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
						try {
							const data = {
								type: 'fileUpload',
								action: 'contentImg'
							};
							window.android.recruitHandler(JSON.stringify(data))
						} catch (err) {
							console.log(err)
						}
					} else {
						this.uploadFile()
					}
				} else {
					this.uploadFile()
				}
				// #endif
				// #ifdef MP
				this.uploadFile()
				// #endif
			},
			uploadFile() {
				uni.chooseFile({
					count: 1,
					extension: ['.png', '.jpg'],
					success: (resFile) => {
						console.log(resFile)
						const file = resFile.tempFiles[0]
						uploadAvatar(file).then(res => {
							// 上传完成需要更新 fileList
							if (res.data) {
								this.fileList.push(res.data)
							}
						})
					},
					fail(err) {}
				})
			},
			appFileCallback(resFile) {
				this.fileList.push(resFile.fileUrl)
			},
			delAvatar(index) {
				this.fileList.splice(index,1)
			}
		}
	};
</script>

<style scoped lang="scss">
	/* pages/mine/setting/feedback/index.wxss */
	.container {
		padding: 30rpx 30rpx 0;
	}

	.uni-text {
		width: 100%;
		height: 600rpx;
	}

	.pic-item {
		margin: 0 20rpx 20rpx 0;
		width: 159rpx;
		height: 159rpx;
		position: relative;
	}
	.pic-item .del{width: 36rpx;height: 36rpx;color: #fff;border-radius: 50%;position: absolute;top: 0;right: 0;z-index: 3;}
	.pic-item .pic {
		width: 159rpx;
		height: 159rpx;
		border: 1px solid #E6E6EB;
		border-radius: 8rpx;
	}

	.container .content .upload {
		margin-bottom: 80rpx;
	}

	.container .content .upload {
		width: 159rpx;
		height: 159rpx;
		border: 1px solid #E6E6EB;
		border-radius: 8rpx;
	}

	.container .bottom .right .btn {
		width: 132rpx;
		height: 56rpx;
		border-radius: 4rpx;
		margin: 0;
	}
</style>